<template>
  <div style="display: flex;flex-direction: row;height: 100%" v-if="!refreshing">
    <div style="display: flex;flex-direction: column">
      <dv-border-box-13 backgroundColor="#19233Ddf" style="width: 300px;height:730px;padding: 20px;">
        <div class="bg-color-black" >
          <div class="d-flex jc-center body-box">
            <div style="max-height: 730px;overflow-y: auto">
              <dv-border-box-12 style="height: 40px;overflow-y: hidden" v-for="(item,index) in defs" :key="index" :backgroundColor="item.code==selectItem.code?'#FFA500df':'#19233Ddf'">
                <div style="display: flex;flex-direction: row;padding-top: 10px;cursor: pointer" @click="selectItemClick(item)">
                  <div style="color: white;width: 180px;margin-left: 40px">
                    {{item.num}}.{{item.name}}
                  </div>
                  <div style="color: white;width: 100px;margin-left: 20px">
                    {{item.code}}
                  </div>
                </div>

              </dv-border-box-12>
            </div>
          </div>
        </div>
      </dv-border-box-13>
      <dv-border-box-8 style="height: 30px;padding: 10px;width: 300px;margin-top: 10px;margin-left: 10px">
        <div style="color: white;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;cursor: pointer" @click="downlodTemplate">模板下载</div>
      </dv-border-box-8>
    </div>
    <dv-border-box-11 :title="selectItem.name" style="height: 750px;padding-top: 60px;padding-left: 50px">
      <el-table
        :data="selectItem.def"
        style="width: 96%;"
        max-height="650px"
        :stripe="true">
        <el-table-column
          prop="name"
          label="name">
        </el-table-column>
        <el-table-column
          prop="Heading"
          label="Heading">
        </el-table-column>
        <el-table-column
          prop="Status"
          label="Status">
        </el-table-column>
        <el-table-column
          prop="TYPE"
          label="TYPE">
        </el-table-column>
        <el-table-column
          prop="Description"
          label="Description">
        </el-table-column>
      </el-table>
    </dv-border-box-11>
  </div>
</template>
<script>
import axios from "axios";
let baseUrl = ''
export default {
  props:["prj"],
  data(){
    return {
      defs:[],
      refreshing:true,
      selectItem:null
    }
  },
  created () {
    this.initData();
  },
  mounted () {
  },
  methods:{
    selectItemClick(item){
      this.selectItem=item;
    },
    getName(item){
      //xx.xxxxxxxxxxx[xxx]   2+1+10+2+4
      let num = item.num;
      if (parseInt(num)<10) num = "0"+num;

      let name  =item.name;
      for (let i=0;i<10-name.length;i++){
        name+="---";
      }
      console.log(`${num}.${name}[${item.code}]`)
      return `${num}.${name}[${item.code}]`;
    },
    initData(){
      axios.get(baseUrl + '/api/prj/def?code=' + this.prj)
        .then(
          res => {
            this.defs = res.data

            if ((this.defs)&&(this.defs.length>0)){
              this.selectItem = this.defs[0];
            }
            console.log(this.defs)
            this.refreshing = false
          }
        )
    },
    downlodTemplate(){
      console.log("下载模板")
    }
  }

}
</script>
<style>
.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}
</style>
